<template>
    <div style="height: 100%">
        <div class="message-header">
            <span>报价组合管理</span>
            <el-button type="success" v-if="crm.quotationComb.save" @click="createQuotationComb" size="medium">新建报价组合</el-button>
        </div>
        <div v-loading="loading" class="message-content"
            v-empty="!crm.quotationComb.index" xs-empty-icon="nopermission" xs-empty-text="暂无权限">
            <el-table style="width: 100%;height: 100%"
                stripe
                border
                highlight-current-row
                :data="dataList">
                <el-table-column
                    show-overflow-tooltip
                    class-name="table-head-name"
                    prop="quotationItemId"
                    label="报价项">
                    <template slot-scope="scope">
                        <div>
                            <span>{{scope.row.itemOption | handleQuotationItemName(optionsList.quotationItem)}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    v-for="(head,index) in listHead" :key="index"
                    show-overflow-tooltip
                    class-name="table-head-name"
                    :prop="head.prop"
                    :label="head.label">
                    <template slot-scope="scope">
                        <div>
                            <i :class="{'el-icon-check': scope.row[head.prop] == 1,'el-icon-close': scope.row[head.prop] != 1}"
                                :style="{color: scope.row[head.prop] == 1 ? 'green' : 'red'}"
                                style="font-size: 18px;font-weight: bold">
                            </i>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    class-name="table-head-name"
                    prop="rate"
                    label="增值税率（%）">
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    class-name="table-head-name"
                    prop="updateTime"
                    label="更新时间">
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    class-name="table-head-name"
                    width="100"
                    label="操作">
                    <template slot-scope="scope">
                        <div class="operations">
                            <span v-if="crm.quotationComb.update" @click="changeQuotationItem(scope)">{{'修改'}}</span>
                            <span v-if="crm.quotationComb.delete" style="color: red" @click="deleteQuotationItem(scope)">{{'删除'}}</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 新建和编辑 -->
        <el-dialog
            v-if="showQuotationCombDialog"
            :visible.sync="showQuotationCombDialog"
            :title="titleText + '报价组合'"
            width="60%">
            <p class="new-dialog-title">基本信息</p>
            <el-form
                ref="dialogRef"
                :inline="true"
                class="new-dialog-form"
                :model="formInline"
                :rules="dialogRules"
                label-width="80px"
                label-position="top">
                <el-form-item
                    v-for="(item, index) in fieldList"
                    :key="index"
                    :label="item.name"
                    :prop="item.fieldName">
                    <span slot="label">{{ item.name }}</span>
                    <template v-if="item.fieldType == 'select'">
                        <el-select
                            v-model="formInline[item.fieldName]"
                            filterable
                            placeholder="请选择">
                            <el-option
                                v-for="optionItem in optionsList[item.fieldName]"
                                :key="optionItem.id"
                                :label="optionItem.name"
                                :value="optionItem.id"/>
                        </el-select>
                    </template>
                    <template v-if="item.fieldType == 'multiple_select'">
                        <el-select
                            v-model="formInline[item.fieldName]"
                            filterable
                            multiple
                            placeholder="请选择">
                            <el-option
                                v-for="optionItem in optionsList[item.fieldName]"
                                :key="optionItem.id"
                                :label="optionItem.name"
                                :value="optionItem.id"/>
                        </el-select>
                    </template>
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer">
                <el-button type="primary" @click="saveData">保 存</el-button>
                <el-button @click="showQuotationCombDialog = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  crmProductQuotationItems,
  saveOrUpdate,
  queryQuotationTemplate,
  delQuotationItem
} from '@/api/customermanagement/quotation'
export default {
    data(){
        return {
            listHead: [
                {label: '语祯云部署',prop: 'publicDeploy'},
                {label: '甲方本地部署',prop: 'localDeploy'}
            ],
            dataList:[],
            showQuotationCombDialog: false,
            formInline: {},
            //下拉选择
            optionsList: {},
            //校验规则
            dialogRules: {},
            loading: false,
            titleText: '新增'
        }
    },
    computed: {
        ...mapGetters(["crm"]),
        /** 字段列表 */
        fieldList: function() {
            return [
                { fieldName: 'quotationItem', name: '报价项',fieldType: 'select',value: null },
                { fieldName: 'vatRate', name: '增值税率（%）',fieldType: 'select',value: null},
                { fieldName: 'deployMode', name: '部署方式',fieldType: 'multiple_select',value: [] },
            ]
        }
    },

    filters: {
        handleQuotationItemName(id,list){
            let item = list.find(item => item.id == id);
            return item && item.name ? item.name : '--'
        }
    },

    mounted() {
        this.init();
        this.handleFiledData();
    },

    methods: {
        init(data){
            queryQuotationTemplate().then(res => {
                this.optionsList = res.data;
            })
            this.getQuotationItems();
        },

        //字段数据处理
        handleFiledData(){
            this.fieldList.forEach(element => {
                this.dialogRules[element.fieldName] = {
                    required: true,
                    message: element.name + '不能为空',
                    trigger: 'change'
                }
            });
        },


        //获取报价组合清单
        getQuotationItems(){
            this.loading = true;
            crmProductQuotationItems().then(res => {
                this.loading = false;
                this.dataList = res.data;
            }).catch(res => {
                this.loading = false;
            })
        },

        //新增报价组合
        createQuotationComb(){
            let item = {}
            this.fieldList.forEach(element => {
                item[element.fieldName] = element.value;
            });
            this.formInline = item;
            this.titleText = '新增';
            this.showQuotationCombDialog = true;
        },

        //修改报价组合信息
        changeQuotationItem(scope){
            let item = {};
            item.quotationItemId = scope.row.quotationItemId ? scope.row.quotationItemId : 0;
            item.quotationItem = scope.row.itemOption ? scope.row.itemOption : null;
            item.vatRate = scope.row.rate ? scope.row.rate : null;
            item.deployMode = [];
            if(scope.row.publicDeploy == 1){
                item.deployMode.push(1);
            }
            if(scope.row.localDeploy == 1){
                item.deployMode.push(2);
            }
            this.formInline = item;
            this.titleText = '编辑';
            this.showQuotationCombDialog = true;
        },

        //删除报价组合
        deleteQuotationItem(scope){
            let params = {
                quotationItemId : scope.row.quotationItemId ? scope.row.quotationItemId : 0
            }
            this.$confirm('确定删除该条报价组合数据？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delQuotationItem(params).then(res => {
                    this.getQuotationItems()
                })
            }).catch(() => {

            });
        },

        //保存数据
        saveData(){
            this.$refs.dialogRef.validate(valid => {
                if (valid) {
                    let formData = this.formInline;
                    let params = {};
                    params.quotationItemId = formData.quotationItemId ? formData.quotationItemId : 0;
                    params.itemOption = formData.quotationItem;
                    params.rate = formData.vatRate;
                    let publicDeploy = this.formInline.deployMode.some(item => item == 1);
                    let localDeploy = this.formInline.deployMode.some(item => item == 2);
                    params.publicDeploy = publicDeploy ? 1 : 2;
                    params.localDeploy = localDeploy ? 1 : 2;
                    saveOrUpdate(params).then(res => {
                        this.showQuotationCombDialog = false;
                        this.getQuotationItems()
                    }).catch(res => {
                        this.showQuotationCombDialog = false;
                    })
                }
            })
        }
    }
};
</script>

<style lang="scss" scoped>
.message-header {
    height: 60px;
    font-size: 18px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}
.message-content {
    height: calc(100% - 70px);
    background-color: #ffffff;
    padding: 20px 20px 0 20px;
    box-sizing: border-box;

    /deep/ .table-head-name {
        color: #000;
        font-size: 13px;
        line-height: 23px;
        .operations {
            color: #5383ED;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            span:hover{
                cursor: pointer;
                border-bottom: 1px solid;
            }
        }
    }
}

.el-table /deep/ .el-table__row.current-row {
  td:first-child::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background-color: #5383ED;
  }
}

.new-dialog-title {
  padding-left: 10px;
  margin-bottom: 3px;
  border-left: 2px solid #46cdcf;
}

.new-dialog-form {
  height: 30vh;
  overflow-y: auto;
  padding: 20px;
}
.new-dialog-form /deep/ .el-form-item {
  width: 50%;
  margin: 0;
  padding-bottom: 10px;
}
.new-dialog-form /deep/ .el-form-item .el-form-item__label {
  padding: 0;
}
.new-dialog-form /deep/ .el-form-item .el-form-item__content {
  width: 80%;
}

.new-dialog-form /deep/ .el-select {
  display: block;
}

</style>
